<!DOCTYPE html>
<html style="height: 100%;">
	<head>
		<title>记账</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0, user-scalable=no"/>
		<script src="js/flexible.js"></script>
		<!-- 引入样式 -->
<!--		<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">-->
		<link rel="stylesheet" href="css/mint-ui.css">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
	</head>
	<body style="height: 100%;">
		<div class="contBg" id="accounting">
			<ul v-infinite-scroll="loadMore"
				  infinite-scroll-disabled="scrollLoading"
				  infinite-scroll-distance="1">
				<li v-for="item in list">
					<h6>
						<span v-text="item.yearMonth"></span>
					</h6>
					<div class="cont">
						<table cellspacing="0" cellpadding="0">
							<thead>
<!--
								<tr>
									<th style="text-align: left;">工人</th>
									<th>上班时长</th>
									<th>加班情况</th>
									<th>确认情况</th>
								</tr>
-->
								<tr>
									<th style="text-align: left;">工人</th>
									<th>
										<p>正常上班</p>
										<p>加班</p>
									</th>
									<th>工资</th>
									<th>确认情况</th>
								</tr>
							</thead>
<!--
							<tbody v-if="isManager">
								<tr v-for="tab in item.listMigWageSTimeBo">
									<td style="text-align: left;">{{tab.realname}}</td>
									<td>{{tab.numTime}}小时</td>
									<td :class="{status2:tab.nullAdd}">{{tab.numAdd}}</td>
									<td :class="tab.statusClass">
										<a>{{tab.statusData}}</a>
									</td>
								</tr>
							</tbody>
							<tbody v-else>
								<tr>
									<td style="text-align: left;">{{item.realname}}</td>
									<td>{{item.numTime}}小时</td>
									<td :class="{status2:item.nullAdd}">{{item.numAdd}}</td>
									<td :class="item.statusClass">
										<a>{{item.statusData}}</a>
									</td>
								</tr>
							</tbody>
-->
							<tbody v-if="isManager">
								<tr v-for="tab in item.listMigWageSTimeBo">
									<td style="text-align: left;">{{tab.realname}}</td>
									<td>
										<p>上班{{tab.numTime}}小时</p>
										<p :class="{status2:tab.nullAdd}">加班{{tab.numAdd}}</p>
									</td>
									<td> &yen;{{tab.wageallGross}}</td>
									<td :class="tab.statusClass">
										<a>{{tab.statusData}}</a>
									</td>
								</tr>
							</tbody>
							<tbody v-else>
								<tr>
									<td style="text-align: left;">{{item.realname}}</td>
									<td>
										<p>上班{{item.numTime}}小时</p>
										<p :class="{status2:item.nullAdd}">加班{{item.numAdd}}</p>
									</td>
									<td> &yen;{{item.wageallGross}}</td>
									<td :class="item.statusClass">
										<a>{{item.statusData}}</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</li>
			</ul>
			<div class="loading">
				<mt-spinner style="margin: 0px auto;display: block;width: 30px;" v-show="loading" color="#666" :size="20"></mt-spinner>
				<p v-show="last" style="text-align: center; color:#666;line-height: 29px;">
					没有数据了
				</p>
	  		</div>
		</div>
		<script src="js/vue.min.js"></script>
		<script src="js/all.js" type="text/javascript" charset="utf-8"></script>
  	<script src="js/index.js"></script>
  	<script src="js/axios.min.js"></script>
  	<script src="js/message.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#accounting",
				data:{
					a:"",
					//上拉加载
					loading:false,
					scrollLoading:false, 
					last:false,//是否显示已到最底部
					page:1,//传给后端的页数
					list:[],
					getStatus:"",
					isManager:0
				},
				methods:{
					query:function(){
						this.scrollLoading = false;  //true滚动事件停止触发
	    				this.loading = true;				//true加载效果圈显示
						if (this.isManager) {
							this.getStatus = "getGroupStatus"
							this.getData(1)   //班组长记账消息
						}else{
							this.getStatus = "getWorkerStatus"
							this.getData(0)		//工人记账消息
						}
					},
					loadMore: function() {
						this.page++;
    					this.query();
					},
					getData:function(status){
						axios.get(url+this.getStatus,{
								params:{
									"groupId": GetQueryString("groupId") ,
									"projectId": GetQueryString("projectId") ,
//                                    "groupId": "10639" ,
//                                    "projectId": "0" ,
									"currentPage":this.page
								},
								headers:{"token":GetQueryString("token")}
//                            headers:{"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpdyI6IlRodSBBdWcgMTcgMTA6NTQ6MjkgQ1NUIDIwMTcifQ.gqx5ihSN-_P8F4ZqJsDq0vIQcfFkjxlPiXaDiQ4xZHMuserId:675"}

							}).then(function(data){
							var dataList = data.data.data;
							this.a=dataList
							this.loading = false;
							this.last = true;
							if (dataList) {
								if (status) {
									for(var i=0;i<dataList.length;i++){
										for(var j=0,listMigWageSTimeBo=dataList[i].listMigWageSTimeBo;j<listMigWageSTimeBo.length;j++){
											switch (listMigWageSTimeBo[j].groupStatus){
												case 1:
													listMigWageSTimeBo[j].statusData = "已确认"
													listMigWageSTimeBo[j].statusClass = "status1"
												break;
												case 2:
													listMigWageSTimeBo[j].statusData = "未确认"
													listMigWageSTimeBo[j].statusClass = "status2"
												break;
												case 3:
													listMigWageSTimeBo[j].statusData = "有回复"
													listMigWageSTimeBo[j].statusClass = "status3"
												break;
												case 4:
													listMigWageSTimeBo[j].statusData = "已拒绝"
													listMigWageSTimeBo[j].statusClass = "status3"
												break;
											}
											if (listMigWageSTimeBo[j].numAdd) {
												listMigWageSTimeBo[j].numAdd = listMigWageSTimeBo[j].numAdd+"小时"
											}else{
												listMigWageSTimeBo[j].numAdd = "无加班";
												listMigWageSTimeBo[j].nullAdd = true
											}
										}
									}
								}else{
									for(var i=0;i<dataList.length;i++){
										switch (dataList[i].workerStatus){
											case 1:
												dataList[i].statusData = "已确认"
												dataList[i].statusClass = "status1"
											break;
											case 2:
												dataList[i].statusData = "未确认"
												dataList[i].statusClass = "status2"
											break;
											case 3:
												dataList[i].statusData = "有回复"
												dataList[i].statusClass = "status3"
											break;
											case 4:
												dataList[i].statusData = "已拒绝"
												dataList[i].statusClass = "status3"
											break;
										}
										if (dataList[i].numAdd) {
											dataList[i].numAdd = dataList[i].numAdd+"小时"
										}else{
											dataList[i].numAdd = "无加班";
											dataList[i].nullAdd = true
										}
									}
								}
								this.list.push.apply(this.list, dataList);
								this.loading = false;
								this.scrollLoading = false;
								if(dataList.length == 0){
									this.scrollLoading = true;
									this.last = true;
								}
							}
						}.bind(this))
					}
				},
				mounted:function(){
			  	this.$nextTick(function(){   // 文档加载后调用
			  		this.isManager = GetQueryString("isManager")
			  		this.query()
					});
			  }
			})
		</script>
	</body>
</html>
